<template>
	<div class="pagination">
		<span class="el-icon-arrow-left" :class="{disable:!value.hasPreviousPage}" @click="prevPage"></span>
		<span class="page">{{value.pageNum}}/{{value.pages}}</span>
		<span class="el-icon-arrow-right" :class="{disable:!value.hasNextPage}" @click="nextPage"></span>
	</div>
</template>

<script>
	export default{
		props:{
			value:Object
		},
		methods:{
			prevPage(){
				if(this.value.hasPreviousPage){
					this.$emit('change',this.value.prePage,this.value.pageSize)
				}
			},
			nextPage(){
				if(this.value.hasNextPage){
					this.$emit('change',this.value.nextPage,this.value.pageSize)
				}
			}
		}
	}
</script>

<style lang="scss">
.pagination {
	position: absolute;
	width: 40px;
	height: 120px;
	right: -50px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	span {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		&:hover {
			background-color: rgba(0, 0, 0, 0.04);
		}
	}
	.page {
		&:hover {
			background-color: unset;
		}
	}
	.disable{
		cursor: no-drop;
		color: #ccc;
		&:hover {
			background-color: unset;
		}
	}
}
@media screen and (max-width: 768px) {
	.pagination {
		position: static;
		width: 100%;
		height: 60px;
		display: flex;
		flex-direction: row;
		span {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			cursor: pointer;
			&:hover {
				background-color: rgba(0, 0, 0, 0.04);
			}
		}
		.page {
			&:hover {
				background-color: unset;
			}
		}
	}
}
</style>
